<template>
  <div>
    <van-popup v-model:show="dialogShow" :close-on-click-overlay="false">
      <div class="main">
        <!-- 标题 -->
        <div v-if="data.list.length > 0" class="title"></div>
        <!-- 表格 -->
        <div v-if="data.list.length > 0" class="form">
          <div class="head">
            <div class="head-title one">获取时间</div>
            <div class="head-title tow">所属拼图</div>
            <div class="head-title three">奖励详情</div>
          </div>
          <div v-for="(item, i) in data.list" :key="i" class="body">
            <div class="body-list body-one">
              <span>{{ item.created_at }}</span>
            </div>
            <div class="body-list body-tow">
              <span>{{ item.puzzle_name }}</span>
            </div>
            <div class="body-list body-three">
              <span v-for="(el, index) in item.prizes" :key="index">{{ el }}</span>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <van-pagination
          v-if="data.list.length > 0"
          v-model="data.current_page"
          mode="simple"
          :total-items="data.total"
          :items-per-page="5"
          @change="pageChange"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
        </van-pagination>
        <!-- 空状态 -->
        <van-empty v-else :image="nothing" description="暂无记录" />
      </div>
      <!-- 关闭图标 -->
      <div class="close" @click="onClose"></div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { getRecordListApi } from '@/netWork/puzzleHome.js'
import nothing from '@/assets/childrenDay/nothing.png'
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
})
const dialogShow = computed(() => {
  return props.show
})
// 弹窗关闭
const emit = defineEmits(['close'])
const onClose = () => {
  data.value.current_page = 1
  emit('close', 'record')
}
// 换页事件
const pageChange = (value) => {
  console.log(value)
  data.value.current_page = value
  getRecordList()
}
// 获取奖励记录列表
const getRecordList = async () => {
  const res = await getRecordListApi({ page: data.value.current_page })
  console.log(res, '记录')
  data.value = res.data
}
// 监听  弹窗显示时再发送请求获取数据
watch(
  () => props.show,
  (value) => {
    if (value) {
      getRecordList()
    }
  }
)

// 假数据测试
const data = ref({
  current_page: 1,
  total: 10,
  list: [],
})
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
